<!--
 * @Date: 2019-11-11 11:20:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-07 14:46:14
 * @describe: -新盘详情页-
 -->
<template>
  <div class="BuildingDetails">
    <el-row>
      <el-col :span="18">
        <span class="title_span">新盘管理 - 新盘详情</span>
      </el-col>
      <el-col :span="5" style="text-align:right">
        <el-button
          v-if="MaintainType&&inputState==true&&$hasPermission('project:projectinfo:update')"
          type="text"
          icon="el-icon-edit"
          @click="inputState=false"
        >修改</el-button>
        <el-button
          v-if="inputState==false"
          type="text"
          icon="el-icon-warning"
          @click="inputState=true"
        >取消</el-button>
        <el-button
          v-if="MaintainType&&inputState==false&&$hasPermission('project:projectinfo:update')"
          type="text"
          icon="el-icon-folder-checked"
          @click="update"
        >保存</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top:10px;">
      <el-row>
        <el-col :span="11">
          <div class="Properties">
            <div class="PropertiesIMG">
              <img v-if="LPimg" :src="LPimg" alt />
              <div v-else class="colorGray LPimgNull">图片拍摄中</div>
            </div>
            <div class="PropertiesName">
              <div class="marg_t15 fontColor1">
                新盘名称：
                <span v-if="inputState">{{dataForm.name}}</span>
                <el-input v-else v-model="dataForm.name" class="formInput"></el-input>
              </div>
              <div class="marg_t15 fontColor1">
                新盘编号：
                <span>{{"LP - "+dataForm.id.substring(dataForm.id.length-6)}}</span>
              </div>
              <div class="marg_t15">
                <el-tag class="marg_r10">{{ $getDictLabel("dictType", dataForm.type)}}</el-tag>
                <el-tag class="marg_r10">{{ $Dictionaries("CityRegion", dataForm.districtCode) }}</el-tag>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="marg_t15 fontColor1">
            单价：
            <span v-if="inputState">{{dataForm.price}}元/m &nbsp;~&nbsp; {{dataForm.pricee}}元/m</span>
            <span v-else>
              <el-input v-model="dataForm.price" class="formInput_a" placeholder="最低单价"></el-input>&nbsp;~&nbsp;
              <el-input v-model="dataForm.pricee" class="formInput_a" placeholder="最高单价"></el-input>
            </span>
          </div>
          <div class="marg_t15 fontColor1">
            总价：
            <span
              v-if="inputState"
            >{{dataForm.prices}}元/m/月 &nbsp;~&nbsp; {{dataForm.pricese}}元/m/月</span>
            <span v-else>
              <el-input v-model="dataForm.prices" class="formInput_a" placeholder="最低总价"></el-input>&nbsp;~&nbsp;
              <el-input v-model="dataForm.pricese" class="formInput_a" placeholder="最高总价"></el-input>
            </span>
          </div>
          <div class="marg_t15 fontColor1">
            地铁线路：
            <span v-if="inputState" v-for="(item,index) in metroList" :key="index">
              {{item.metroName}}
              {{item.stationName}}
              &nbsp;
            </span>
            <el-checkbox-group
              v-model="metroCheckList"
              v-if="!inputState"
              style="display:inline-block"
            >
              <el-checkbox
                :label="item.id"
                v-for="(item,index) in metroList"
                :key="index"
                class="fontColor1"
              >
                {{item.metroName}}
                {{item.stationName}}
              </el-checkbox>
            </el-checkbox-group>
            <span class="TabHeader_icon" @click="deleteMetroList" v-if="!inputState">
              <svg
                t="1574928036401"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2628"
                width="14"
                height="14"
              >
                <path
                  d="M762.218 134.865H263.15c-45.947 0-83.178 37.228-83.178 83.175v27.725h665.422V218.04c0.001-45.947-37.229-83.175-83.177-83.175m-145.29-55.45l12.238 87.507H396.203l12.237-87.507h208.488m6.66-55.45H401.783c-22.88 0-44.162 18.52-47.357 41.209L338.207 181.19c-3.168 22.66 12.97 41.181 35.85 41.181h277.258c22.879 0 39.017-18.519 35.823-41.208l-16.22-116.017c-3.17-22.662-24.451-41.181-47.33-41.181m152.493 277.248H249.288c-30.488 0-53.205 24.855-50.443 55.233l45.435 499.479c2.734 30.379 29.973 55.233 60.46 55.233h415.89c30.487 0 57.726-24.856 60.46-55.233l45.434-499.48c2.761-30.377-19.956-55.232-50.443-55.232M401.78 800.26h-83.178l-27.726-388.147H401.78V800.26z m166.356 0H457.233V412.113h110.904V800.26z m138.629 0h-83.178V412.113H734.49L706.766 800.26z"
                  p-id="2629"
                  fill="#d81e06"
                />
              </svg>
            </span>

            <el-popover placement="bottom" trigger="click" v-if="!inputState">
              <span class="TabHeader_icon" slot="reference">
                <svg
                  t="1574929780282"
                  class="icon"
                  viewBox="0 0 1028 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3461"
                  width="14"
                  height="14"
                >
                  <path
                    d="M512.277 954.412c-118.89 0-230.659-46.078-314.73-129.73S67.12 629.666 67.12 511.222s46.327-229.744 130.398-313.427 195.82-129.73 314.73-129.73 230.659 46.078 314.72 129.73S957.397 392.81 957.397 511.183 911.078 740.96 826.97 824.642s-195.8 129.77-314.692 129.77z m0-822.784c-101.972 0-197.809 39.494-269.865 111.222s-111.7 166.997-111.7 268.373 39.653 196.695 111.67 268.335S410.246 890.78 512.248 890.78s197.809-39.484 269.865-111.222 111.7-166.998 111.67-268.374c-0.03-101.375-39.654-196.665-111.67-268.303S614.22 131.628 512.277 131.628z m222.585 347.8H544.073V288.64c-0.76-17.561-15.613-31.18-33.173-30.419-16.495 0.714-29.704 13.924-30.419 30.419v190.787H289.703c-17.56 0.761-31.179 15.614-30.419 33.174 0.715 16.494 13.924 29.703 30.42 30.418H480.48v190.788c0.761 17.56 15.614 31.179 33.174 30.419 16.494-0.715 29.703-13.925 30.418-30.42V543.02h190.788c17.56 0.762 32.413-12.857 33.173-30.418 0.762-17.561-12.858-32.414-30.419-33.174a31.683 31.683 0 0 0-2.753 0z"
                    fill="#3dc2ff"
                    p-id="3462"
                  />
                </svg>
              </span>
              线路：
              <el-select v-model="addMetroFrom.metroId" placeholder="请选择" clearable size="small">
                <el-option
                  v-for="item in this.$store.state.MetroPage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="MetroPageChange(item)"
                ></el-option>
              </el-select>站点：
              <el-select
                v-model="addMetroFrom.stationId"
                placeholder="请选择"
                :disabled="addMetroFrom.metroId==''"
                size="small"
              >
                <el-option
                  v-for="item in metrostationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                ></el-option>
              </el-select>

              <!-- <br> -->
              <el-button type="primary" size="small" style="margin-left:5px;" @click="addMetro">添加</el-button>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="marg_t15 fontColor1">
            新盘别名：
            <span v-if="inputState">{{dataForm.anotherName}}</span>
            <el-input v-else v-model="dataForm.anotherName" class="formInput"></el-input>
          </div>
          <!-- <div class="marg_t15 fontColor1">
                        驻场销售：
                        <span>{{dataForm.maintainName}} &nbsp;</span>
                        <el-popover
                        placement="bottom"
                        width="180"
                        trigger="click"
                        :content="'电话'+dataForm.maintainPhone"
                        >
                        <el-button
                            slot="reference"
                            type="text"
                            icon="el-icon-user"
                        >查看联系方式</el-button>
                        </el-popover>
          </div>-->

          <div class="marg_t15 fontColor1">
            驻场销售：
            <span v-if="inputState">{{dataForm.maintainName}}&nbsp;</span>
            <el-popover
              placement="bottom"
              width="200"
              trigger="click"
              :content="'手机号码：'+dataForm.maintainPhone"
              v-if="inputState"
            >
              <el-button slot="reference" type="text" icon="el-icon-user">查看联系方式</el-button>
            </el-popover>

            <span v-else-if="!inputState&&$hasPermission('project:projectinfo:updateMaintain')">
              {{dataForm.maintainName}}&nbsp;
              <el-popover placement="bottom" width="200" trigger="click">
                <div>
                  部门：
                  <el-cascader
                    style="width:120px"
                    v-model="deptSelectVal"
                    :options="this.$store.state.DeptList"
                    :show-all-levels="false"
                    @change="deptIdChange"
                    :props="deptProps"
                    ref="myCascader"
                  ></el-cascader>
                </div>
                <div>
                  人员：
                  <el-select v-model="dataForm.maintainName" placeholder="请选择" style="width:120px">
                    <el-option
                      v-for="item in maintainList"
                      :key="item.id"
                      :label="item.realName"
                      :value="item.id"
                      @click.native="maintainChange(item)"
                    ></el-option>
                  </el-select>
                </div>
                <el-button slot="reference" type="text">修改驻场销售</el-button>
              </el-popover>
            </span>
            <span v-else>{{dataForm.maintainName}}&nbsp;</span>
          </div>
          <div class="text_right">
            <el-button type="primary" @click="gotoCustomer()">报备</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card_title">新盘简介</span>
      </div>
      <div v-if="inputState" class="fontColor1 introduction">{{dataForm.content}}</div>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4}"
        v-model="dataForm.content"
      ></el-input>
    </el-card>
    <el-row>
      <el-col :span="12" style="padding-right:7px;">
        <el-card class="box-card martop15">
          <div slot="header" class="clearfix">
            <span class="card_title">基本信息</span>
          </div>
          <div class="fontColor1">
            <ul class="parameter_ul">
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">销售状态：</span>
                  <span v-if="inputState">{{ $getDictLabel("projState", dataForm.state)}}</span>
                  <ren-select
                    v-else
                    v-model="dataForm.state"
                    dict-type="projState"
                    class="formInput"
                  ></ren-select>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">新盘地址：</span>
                  <span v-if="inputState">{{dataForm.address}}</span>
                  <el-input v-else v-model="dataForm.address" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">物业类型：</span>
                  <span v-if="inputState">{{ $getDictLabel("dictType", dataForm.type)}}</span>
                  <ren-select
                    v-else
                    v-model="dataForm.type"
                    dict-type="dictType"
                    placeholder="物业类型"
                    class="formInput"
                  ></ren-select>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">物业公司：</span>
                  <span v-if="inputState">{{dataForm.propertyCompany}}</span>
                  <el-input v-else v-model="dataForm.propertyCompany" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">物业费：</span>
                  <span v-if="inputState">{{dataForm.propertyPrice}}</span>
                  <el-input v-else v-model="dataForm.propertyPrice" class="formInput"></el-input>
                </div>

                <div class="parameter_r">
                  <span class="parameter_span">物业电话：</span>
                  <span v-if="inputState">{{dataForm.propertyPhone}}</span>
                  <el-input v-else v-model="dataForm.propertyPhone" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">物业地址：</span>
                  <span v-if="inputState">{{dataForm.propertyAdress}}</span>
                  <el-input v-else v-model="dataForm.propertyAdress" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">所属商圈：</span>
                  <span v-if="inputState">{{ $Dictionaries("BusinessPage", dataForm.business) }}</span>
                  <el-select v-else v-model="dataForm.business" class="formInput">
                    <el-option
                      v-for="item in this.$store.state.BusinessPage"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">开发商：</span>
                  <span v-if="inputState">{{dataForm.developers}}</span>
                  <el-input v-else v-model="dataForm.developers" class="formInput"></el-input>
                </div>
                <!-- <div class="parameter_r">
                                    <span class="parameter_span">开发商对接人：</span>
                                    <span v-if="inputState">{{dataForm.developersUser}}</span>
                                    <el-input
                                        v-else
                                        v-model="dataForm.developersUser"
                                        class="formInput"
                                    ></el-input>
                </div>-->
              </li>
              <!-- <li>
                                <div class="parameter_l">
                                    <span class="parameter_span">对接人电话：</span>
                                    <span v-if="inputState">{{dataForm.developersPhone}}</span>
                                    <el-input
                                        v-else
                                        v-model="dataForm.developersPhone"
                                        class="formInput"
                                    ></el-input>
                                </div>
              </li>-->
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" style="padding-left:7px;">
        <el-card class="box-card martop15">
          <div slot="header" class="clearfix">
            <span class="card_title">新盘参数</span>
          </div>
          <div class="fontColor1">
            <ul class="parameter_ul">
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">参考单价：</span>
                  <span v-if="inputState">{{dataForm.price}}</span>
                  <el-input v-else v-model="dataForm.price" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">参考总价：</span>
                  <span v-if="inputState">{{dataForm.prices}}</span>
                  <el-input v-else v-model="dataForm.prices" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">开盘时间：</span>
                  <span v-if="inputState">
                    <!-- {{dataForm.sellTime}} -->
                    {{dataForm.sellTime!=null?dataForm.sellTime.substring(0,10):dataForm.sellTime}}
                  </span>
                  <!-- <el-input
                                        v-else
                                        v-model="dataForm.sellTime"
                                        class="formInput"
                  ></el-input>-->
                  <el-date-picker
                    v-else
                    v-model="dataForm.sellTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    class="formInput"
                  ></el-date-picker>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">规划户数：</span>
                  <span v-if="inputState">{{dataForm.households}}</span>
                  <el-input v-else v-model="dataForm.households" style="width:170px;"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">占地面积：</span>
                  <span v-if="inputState">{{dataForm.occupyArea}} ㎡</span>
                  <el-input v-else v-model="dataForm.occupyArea" class="formInput"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">建筑面积：</span>
                  <span v-if="inputState">{{dataForm.architectureArea}} ㎡</span>
                  <el-input v-else v-model="dataForm.architectureArea" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">面积区间：</span>
                  <span v-if="inputState">{{dataForm.areas+'-'+dataForm.areae}}</span>
                  <span v-else>
                    <el-input v-model="dataForm.areas" style="width:25%"></el-input>&nbsp;-&nbsp;
                    <el-input v-model="dataForm.areae" style="width:25%"></el-input>
                  </span>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">绿化率：</span>
                  <span v-if="inputState">{{dataForm.afforestationRate}}</span>
                  <el-input v-else v-model="dataForm.afforestationRate" class="formInput"></el-input>
                </div>
              </li>
              <li class="list_background">
                <div class="parameter_l">
                  <span class="parameter_span">交房时间：</span>
                  <span v-if="inputState">
                    <!-- {{dataForm.deliverTime}} -->
                    {{dataForm.deliverTime!=null?dataForm.deliverTime.substring(0,10):dataForm.deliverTime}}
                  </span>
                  <!-- <el-input
                                        v-else
                                        v-model="dataForm.deliverTime"
                                        class="formInput"
                  ></el-input>-->
                  <el-date-picker
                    v-else
                    v-model="dataForm.deliverTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    class="formInput"
                  ></el-date-picker>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">容积率：</span>
                  <span v-if="inputState">{{dataForm.plotRate}}</span>
                  <el-input v-else v-model="dataForm.plotRate" class="formInput"></el-input>
                </div>
              </li>
              <li>
                <div class="parameter_l">
                  <span class="parameter_span">经纬度：</span>
                  <span v-if="inputState">{{dataForm.latitude}}</span>
                  <el-input v-else v-model="dataForm.latitude" class="formInput" @focus="getLngLat"></el-input>
                </div>
                <div class="parameter_r">
                  <span class="parameter_span">产权年限：</span>
                  <span v-if="inputState">{{dataForm.propertyYear}}</span>
                  <el-input v-else v-model="dataForm.propertyYear" class="formInput"></el-input>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card martop15 fontColor1">
      <el-row>
        <el-col :span="8">
          <span class="parameter_span">开发商对接人：</span>
          <span v-if="inputState">{{dataForm.developersUser}}</span>
          <el-input v-else v-model="dataForm.developersUser" class="formInput"></el-input>
        </el-col>
        <el-col :span="8">
          <span class="parameter_span">对接人电话：</span>
          <span v-if="inputState">{{dataForm.developersPhone}}</span>
          <el-input v-else v-model="dataForm.developersPhone" class="formInput"></el-input>
        </el-col>
        <el-col :span="8">
          <span class="parameter_span">佣金：</span>
          <span v-if="inputState">{{dataForm.developersCommission}}</span>
          <el-input v-else v-model="dataForm.developersCommission" class="formInput"></el-input>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card martop15">
      <div slot="header" class="clearfix">
        <span class="card_title">新盘备注：</span>
      </div>
      <div v-if="inputState" class="fontColor1 introduction">{{dataForm.remark}}</div>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4}"
        v-model="dataForm.remark"
      ></el-input>
    </el-card>

    <el-card class="box-card martop15">
      <div slot="header" class="clearfix">
        <span class="card_title">新盘配套</span>
      </div>
      <el-row>
        <el-col :span="3">
          <span>配套信息</span>
        </el-col>

        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">供电类型：</span>
            <span v-if="inputState">{{dataForm.power}}</span>
            <el-input v-else v-model="dataForm.power" class="formInput"></el-input>
          </div>
          <div>
            <span class="Matching_span">车位比：</span>
            <span v-if="inputState">{{dataForm.parking}} 个</span>
            <el-input v-else v-model="dataForm.parking" class="formInput"></el-input>
          </div>
        </el-col>
        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">供水类型：</span>
            <span v-if="inputState">{{dataForm.water}}</span>
            <el-input v-else v-model="dataForm.water" class="formInput"></el-input>
          </div>
        </el-col>

        <el-col :span="7" class="fontColor1">
          <div>
            <span class="Matching_span">供暖类型：</span>
            <span v-if="inputState">{{dataForm.heating}}</span>
            <el-input v-else v-model="dataForm.heating" class="formInput"></el-input>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card martop15">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="12">
            <span class="card_title" style="width:180px;">户型</span>
            <el-radio-group v-model="HXimagePageType" @change="getHXimg">
              <el-radio label>全部户型</el-radio>
              <el-radio :label="2">两居室</el-radio>
              <el-radio :label="3">三居室</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-button
              size="small"
              style="width:80px"
              type="primary"
              v-if="MaintainType&&$hasPermission('project:projapartmentimage:apartmentUpload')"
              @click="UploadHX"
            >点击上传</el-button>
            <el-button
              type="primary"
              style="width:80px"
              v-if="MaintainType&&$hasPermission('project:projapartmentimage:apartmentDelete')"
              @click="deleteHXImage"
            >批量删除</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="LP_imgList">
        <el-checkbox-group
          v-model="HXcheckList"
          class="HXHouse_img_check"
          v-if="MaintainType"
          @change="HXcheckListChange"
        >
          <el-checkbox
            :label="item.id"
            v-for="(item,index) in HXimglist"
            :key="index"
            :value="item"
          >
            <div @dblclick="imgDblclick(item.url)">
              <img :src="item.url" alt />
            </div>
            <div class="colorGray text_center martop10">
              <div>{{item.typeS}}室{{item.typeT}}厅{{item.typeW}}卫</div>
              <div>套内{{item.area}}㎡ &nbsp; 约 {{item.price}}/套</div>
            </div>
          </el-checkbox>
        </el-checkbox-group>

        <ul v-else>
          <li v-for="(item,index) in HXimglist" class="HXHouse_img_li" :key="index">
            <div @dblclick="imgDblclick(item.url)">
              <img :src="item.url" alt />
            </div>
            <div class="colorGray text_center martop10">
              <div>{{item.typeS}}室{{item.typeT}}厅{{item.typeW}}卫</div>
              <div>套内{{item.area}}㎡ &nbsp; 约 {{item.price}}/套</div>
            </div>
          </li>
        </ul>
        <el-pagination
          :current-page="HXImgPage"
          :total="HXImgTotal"
          :page-size="HXImglimit"
          layout="total,  prev, pager, next, jumper"
          @current-change="HXimglistChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-card class="box-card martop15">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="12">
            <span class="card_title" style="width:180px;">新盘图片以及视频</span>
            <el-radio-group v-model="XPimgUploadFrom.type" @change="getimg">
              <el-radio :label="0">首页图</el-radio>
              <el-radio :label="1">实景图</el-radio>
              <el-radio :label="2">周边配套</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-button
              size="small"
              style="width:80px"
              type="primary"
              v-if="MaintainType&&$hasPermission('project:projectinfoimage:projectUpload')"
              @click="UploadXP"
            >点击上传</el-button>
            <el-button
              type="primary"
              style="width:80px"
              @click="deleteImage"
              v-if="$hasPermission('project:projectinfoimage:projectDelete')&&MaintainType"
            >批量删除</el-button>
            <!-- <el-upload
                            class="upload-demo"
                            action="/dictionary/dictinfo/upload"
                            multiple
                            :limit="1"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                            :before-upload="imgUploadBefore"
                            style="width:80px;float:right;margin-right:10px"
                            v-if="$hasPermission('project:projectinfoimage:projectUpload')&&MaintainType"
                        >
                            <el-button size="small" type="primary" v-if="MaintainType">点击上传</el-button>
            </el-upload>-->
          </el-col>
        </el-row>
      </div>
      <div class="LP_imgList">
        <el-checkbox-group
          v-model="checkList"
          class="House_img_check"
          v-if="MaintainType"
          @change="checkListChange"
        >
          <el-checkbox :label="item.id" v-for="(item,index) in imglist" :key="index" :value="item">
            <div @dblclick="imgDblclick(item.url)">
              <img :src="item.url" alt />
            </div>
            <span class="colorGray display_i_b" style="padding-top:5px;">{{item.title}}</span>
          </el-checkbox>
        </el-checkbox-group>

        <ul v-else>
          <li v-for="(item,index) in imglist" class="House_img_li" :key="index">
            <div @dblclick="imgDblclick(item.url)">
              <img :src="item.url" alt />
            </div>
          </li>
        </ul>
        <el-pagination
          :current-page="ImgPage"
          :total="ImgTotal"
          :page-size="Imglimit"
          layout="total,  prev, pager, next, jumper"
          @current-change="imglistChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top:15px;">
      <div slot="header" class="clearfix">
        <span class="card_title">周边配套</span>
      </div>

      <baiduMapView ref="baiduMapView" :latitudeVal="dataForm.latitude" v-if="baiduMapView_if"></baiduMapView>
    </el-card>

    <el-card class="box-card" style="margin-top:15px;">
      <div slot="header" class="clearfix">
        <span class="card_title">楼盘动态</span>
        <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
      </div>

      <div class="LPinformation">
        <!-- <ul>
          <li>
              <div class="LPinfo_title">
                  住宅在售
              </div>
              <div class="LPinfo_content">
                  呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃
              </div>
              <div class="LPinfo_date">
                  2020年01月07日
              </div>
              <el-divider></el-divider>
          </li>
        </ul>-->
        <div class="LPimgNull">暂无动态</div>
      </div>
    </el-card>

    <baiduMapUpdate
      v-if="baiduMap_dialog"
      ref="getBaiduMap"
      @getLngLat="LngLatData"
      :UpdateVal="dataForm.latitude"
    ></baiduMapUpdate>

    <el-dialog title="上传户型图片" :visible.sync="HXdialogVisible" width="30%">
      <el-form ref="form" :model="HXimgUploadFrom" label-width="90px" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="HXimgUploadFrom.title"></el-input>
        </el-form-item>
        <el-form-item label="室">
          <el-input v-model="HXimgUploadFrom.typeS"></el-input>
        </el-form-item>
        <el-form-item label="厅">
          <el-input v-model="HXimgUploadFrom.typeT"></el-input>
        </el-form-item>
        <el-form-item label="卫">
          <el-input v-model="HXimgUploadFrom.typeW"></el-input>
        </el-form-item>
        <el-form-item label="大小（㎡）">
          <el-input v-model="HXimgUploadFrom.area"></el-input>
        </el-form-item>
        <el-form-item label="均价">
          <el-input v-model="HXimgUploadFrom.price"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            ref="HXupload"
            action="/project/projectinfo/apartmentUpload"
            :file-list="fileListHX"
            :auto-upload="false"
            :limit="1"
            list-type="picture-card"
            :on-change="imgUploadBeforeHX"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="HXdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="HXuploadFun" :loading="btnLoading">点击上传</el-button>
      </span>
    </el-dialog>

    <el-dialog title="上传新盘图片" :visible.sync="XPdialogVisible" width="30%">
      <el-form ref="form" :model="XPimgUploadFrom" label-width="90px" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="XPimgUploadFrom.title"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            ref="XPupload"
            action="/project/projectinfo/apartmentUpload"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            list-type="picture-card"
            :on-change="imgUploadBeforeHX"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="XPdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="XPuploadFun" :loading="btnLoading">点击上传</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="IMGdialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import baiduMapUpdate from "../BMap/baiduMap";
import baiduMapView from "../BMap/baiduMapView";
import qs from "qs";
export default {
  name: "NewdiskView",
  data() {
    return {
      floorID: this.$route.query.ID,
      inputState: true,
      baiduMap_dialog: false,
      baiduMapView_if: false,
      btnLoading: false,
      dataForm: {
        name: "",
        id: "",
        maintainName: "",
        maintainPhone: "",
        maintain: ""
      },
      imglist: [],
      HXimglist: [],
      MaintainType: false,
      ImgPage: 1,
      ImgTotal: 0,
      Imglimit: 6,
      imagePageType: 0,
      HXImgPage: 1,
      HXImgTotal: 0,
      HXImglimit: 6,
      HXimagePageType: "",
      checkList: [],
      checkedImgList: [], //图片选中数组
      XPdialogVisible: false, //户型图片上传模态框
      XPimgUploadFrom: {
        projId: this.$route.query.ID,
        title: "",
        type: 0
      },
      XPimgUploadFile: new FormData(),
      fileList: [],
      fileListHX: [],
      LPimg: "",
      metroList: [],
      addMetroFrom: {
        projId: this.$route.query.ID,
        metroId: "",
        stationId: ""
      },
      metrostationList: [], //地铁站点列表
      metroCheckList: [], //删除地铁选中列表
      HXcheckList: [],
      HXcheckedImgList: [], //户型图片选中数组
      HXdialogVisible: false, //户型图片上传模态框
      HXimgUploadFrom: {
        projId: this.$route.query.ID,
        typeS: "",
        typeT: "",
        typeW: "",
        area: "",
        price: "",
        title: ""
      },
      HXimgUploadFile: new FormData(),

      deptSelectVal: "",
      maintainList: this.$store.state.maintainList,
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true
      },
      IMGdialogVisible: false,
      dialogImageUrl: ""
    };
  },
  components: {
    baiduMapUpdate,
    baiduMapView
  },
  created() {
    if (!this.floorID) {
      this.$router.go(-1);
    } else {
      this.getInfo();
      this.getimg();
      this.getHXimg();
      this.getMetroList(); //获取地铁
    }
  },
  mounted() {},
  methods: {
    getInfo() {
      let _this = this;
      this.$http
        .get(`/project/projectinfo/${this.floorID}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm = {
            ..._this.dataForm,
            ...res.data
          };
          _this.MaintainType = res.data.permission;
          _this.baiduMapView_if = true;
          _this.getUserInfo();
        })
        .catch(() => {});
    },

    //保存修改新盘
    update() {
      let _this = this;
      this.$http
        .put("/project/projectinfo", this.dataForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.inputState = true;
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 1000,
            onClose: () => {
              this.getInfo();
            }
          });
        })
        .catch(() => {});
    },

    //获取新盘图片
    getimg() {
      let _this = this;
      if (_this.MaintainType == true) {
        _this.Imglimit = 6;
      } else {
        _this.Imglimit = 8;
      }
      this.$http
        .get(`/project/projectinfo/projectImagePage`, {
          params: {
            projId: _this.floorID,
            type: _this.XPimgUploadFrom.type,
            page: _this.ImgPage,
            limit: _this.Imglimit
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.ImgTotal = res.data.total;
          _this.imglist = res.data.list;
          _this.LPimg = "";
          if (_this.XPimgUploadFrom.type == 0) {
            _this.LPimg = _this.imglist[0].url;
          }
        })
        .catch(() => {});
    },

    //获取新盘户型图片
    getHXimg() {
      let _this = this;
      if (_this.MaintainType == true) {
        _this.HXImglimit = 6;
      } else {
        _this.HXImglimit = 8;
      }
      this.$http
        .get(`/project/projectinfo/apartmentImagePage`, {
          params: {
            projId: _this.floorID,
            typeS: _this.HXimagePageType,
            page: _this.HXImgPage,
            limit: _this.HXImglimit
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.HXImgTotal = res.data.total;
          _this.HXimglist = res.data.list;
          //   if (_this.HXimagePageType == 0) {
          //     _this.LPimg = _this.HXimglist[0].url;
          //   }
        })
        .catch(() => {});
    },

    //新盘图片分页
    imglistChange(num) {
      let _this = this;
      _this.ImgPage = num;
      _this.getimg();
    },
    //新盘户型图片分页
    HXimglistChange(num) {
      let _this = this;
      _this.HXImgPage = num;
      _this.getHXimg();
    },
    //新盘图片多选
    checkListChange(list) {
      this.checkedImgList = list;
    },

    //新盘户型图片多选
    HXcheckListChange(list) {
      this.HXcheckedImgList = list;
    },

    //删除新盘图片
    deleteImage() {
      let _this = this;
      this.$confirm("您将批量删除选中的图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post(
              `/project/projectinfo/projectDeleteImage`,
              {},
              {
                params: {
                  ids: _this.checkedImgList.join()
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              _this.$message.success("删除成功！");
              _this.checkedImgList = [];
              _this.getimg();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //删除新盘户型图片
    deleteHXImage() {
      let _this = this;
      this.$confirm("您将批量删除选中的图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post(
              `/project/projectinfo/apartmentDeleteImage`,
              {},
              {
                params: {
                  ids: _this.HXcheckedImgList.join()
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              _this.$message.success("删除成功！");
              _this.HXcheckedImgList = [];
              _this.getHXimg();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //文件限制个数
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

    //点击上传户型图片
    UploadHX() {
      this.fileListHX = [];
      this.HXimgUploadFrom = {
        projId: this.$route.query.ID,
        typeS: "",
        typeT: "",
        typeW: "",
        area: "",
        price: "",
        title: ""
      };
      this.HXdialogVisible = true;
    },

    //点击上传新盘图片
    UploadXP() {
      this.fileList = [];
      this.XPimgUploadFrom = {
        projId: this.$route.query.ID,
        title: "",
        type: 0
      };
      this.XPdialogVisible = true;
    },

    //选择新盘户型图片
    imgUploadBeforeHX(file) {
      let _this = this;
      return false;
    },

    //确定上传新盘户型图片
    HXuploadFun() {
      let _this = this;
      _this.btnLoading = true;
      let formData = new FormData();
      formData.append("file", this.$refs.HXupload.uploadFiles[0].raw);
      this.$http
        .post("/project/projectinfo/apartmentUpload", formData, {
          params: _this.HXimgUploadFrom
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("上传成功！");
          _this.btnLoading = false;
          _this.HXdialogVisible = false;
          _this.getHXimg();
        })
        .catch(() => {
          _this.btnLoading = false;
        });
    },

    //确定上传新盘图片
    XPuploadFun() {
      let _this = this;
      _this.btnLoading = true;
      let formData = new FormData();
      formData.append("file", this.$refs.XPupload.uploadFiles[0].raw);
      this.$http
        .post("/project/projectinfo/projectUpload", formData, {
          params: _this.XPimgUploadFrom
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("上传成功！");
          _this.btnLoading = false;
          _this.XPdialogVisible = false;
          _this.getimg();
        })
        .catch(() => {
          _this.btnLoading = false;
        });
    },

    //获取新盘地铁
    getMetroList() {
      let _this = this;
      this.$http
        .get(`/project/projectinfo/metroList`, {
          params: {
            projId: _this.floorID
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.metroList = res.data;
        })
        .catch(() => {});
    },

    //地铁线路选择change
    MetroPageChange(item) {
      this.metrostationList = item.metroStation;
    },
    //添加地铁线路站点
    addMetro() {
      if (this.addMetroFrom.stationId != "") {
        this.$http
          .post("/project/projectinfo/saveMetro", this.addMetroFrom)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message.success("添加成功！");
            this.getMetroList(); //获取地铁
          })
          .catch(() => {});
      }
    },
    //删除地铁
    deleteMetroList() {
      let _this = this;
      if (this.metroCheckList.length > 0) {
        this.$confirm("您将删除该地铁线路, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$http
            .post(
              "/project/projectinfo/deleteMetro",
              {},
              {
                params: {
                  ids: _this.metroCheckList.join()
                }
              }
            )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.getMetroList(); //获取地铁
            })
            .catch(() => {});
        });
      }
    },

    //点击获取经纬度
    getLngLat() {
      this.baiduMap_dialog = true;
      this.$nextTick(() => {
        this.$refs.getBaiduMap.init();
      });
    },
    //获取经纬度
    LngLatData(obj) {
      this.dataForm.latitude = obj.lng + "," + obj.lat;
    },

    //获取维护人信息
    getUserInfo() {
      let _this = this;
      this.$http
        .get("/sys/user/simpleUserinfo", {
          params: {
            id: _this.dataForm.maintain
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm.maintainName = res.data.realName;
          _this.dataForm.maintainPhone = res.data.mobile;
        })
        .catch(() => {});
    },
    deptIdChange(val) {
      let a = "";
      if (this.$refs.myCascader.getCheckedNodes()[0]) {
        a = this.$refs.myCascader.getCheckedNodes()[0].value;
        this.getUserList(a);
      }
    },
    // 获取部门员工列表
    getUserList(deptId) {
      let _this = this;
      this.$http
        .get(`/sys/user/deptUserList`, {
          params: {
            deptId: deptId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.maintainList = res.data;
        })
        .catch(() => {});
    },
    //维护人修改
    maintainChange(item) {
      let _this = this;
      this.$http
        .put(
          `/project/projectinfo/updateMaintain`,
          {},
          {
            params: {
              id: _this.floorID,
              maintain: item.id,
              deptId: item.deptId
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
          this.getInfo();
        })
        .catch(() => {});
    },
    imgDblclick(url) {
      this.dialogImageUrl = "";
      this.dialogImageUrl = url;
      this.IMGdialogVisible = true;
    },
    gotoCustomer() {
      this.$router.push({
        name: "customer-customerhouseinfo",
        query: {
          dictId: this.floorID
        }
      });
    }
  },
  watch: {
    $route(to, from) {
      if (to.name == "NewdiskView") {
        // 对路由变化作出响应...
        this.floorID = this.$route.query.ID;
        this.inputState = true;
        this.getInfo();
        this.getimg();
        this.getHXimg();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.title_span {
  display: inline-block;
  font-size: 16px;
  color: rgb(116, 116, 116);
  line-height: 33px;
}
.Properties {
  height: 130px;
}
.PropertiesIMG {
  width: 190px;
  height: 100%;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.PropertiesIMG img {
  width: 100%;
  height: 100%;
}
.PropertiesName {
  float: left;
  margin-left: 20px;
}
.introduction {
  line-height: 22px;
}
ul,
li {
  list-style: none;
}
ul {
  padding: 0;
}
.parameter_l {
  width: 50%;
  float: left;
  padding-left: 8%;
}
.parameter_r {
  width: 50%;
  float: right;
  padding-left: 5%;
}
.parameter_ul li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  //   overflow: hidden;
}
.list_background {
  background: rgb(248, 248, 248);
}
.parameter_span {
  display: inline-block;
  width: 40%;
  float: left;
}
.Matching_span {
  display: inline-block;
  width: 100px;
  line-height: 34px;
}

.LP_imgList {
  width: 100%;
  //   height: 175px;
  //   margin-top: -12px;
  .el-pagination {
    margin-top: 0px !important;
  }
}
.LP_imgList ul {
  width: 100%;
  height: 138px;
  margin: 0;
}
.House_img_li {
  width: 180px;
  height: 155px;
  float: left;
  margin-right: 18px;
  div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.House_img_check {
  height: auto;
  .el-checkbox {
    width: 230px;
    height: 160px;
    position: relative;
    margin-right: 20px;
    div {
      width: 100%;
      height: 100%;
      img {
        height: 135px;
      }
    }
    .el-checkbox__label {
      position: absolute;
      top: 0;
    }
  }
}

.HXHouse_img_li {
  width: 180px;
  float: left;
  margin-right: 18px;
  div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.HXHouse_img_check {
  .el-checkbox {
    height: 100%;
    position: relative;
    margin-right: 20px;
    div {
      width: 100%;
      height: 100%;
      img {
        height: 135px;
        border-radius: 10px;
      }
    }
    .el-checkbox__label {
      position: absolute;
      top: 0;
    }
  }
}
.LPinformation {
  ul {
    margin: 0;
    padding: 0;
    li {
      .LPinfo_title {
        font-size: 15px;
        font-weight: 700;
        line-height: 28px;
        color: rgb(51, 51, 51);
      }
      .LPinfo_content {
        padding: 20px 0px;
        color: rgb(54, 54, 54);
      }
      .LPinfo_date {
        color: rgb(128, 128, 128);
      }
    }
  }
}
</style>